<template>
  <div>
    <h1>1. ref 和 $refs 获取原生 DOM 对象</h1>
    <!-- ref 不能和其他标签的 ref 重复 -->
    <h2 id="hh" ref="title">这是一个 h2</h2>
    <button @click="getH2">点我获取 h2</button>
    <h1>2. ref 和 $refs 获取组件对象</h1>
    <Demo ref="de" />
    <button @click="getDemo">点我获取 Demo 组件</button>
  </div>
</template>

<script>
import Demo from './components/Demo.vue'
export default {
  components: {
    Demo
  },
  data() {
    return {
    }
  },
  methods: {
    getH2() {
      // this.$refs.名字
      console.log(this.$refs.title)
      console.log(document.querySelector('#hh'))
    },
    getDemo() {
      // 获取组件对象有什么用? -- 为所欲为
      // 获取组件的属性 (数据), 调用组件的方法 (methods)
      // 不是很推荐使用这种方法来操作子组件的数据
      console.log(this.$refs.de)
      console.log(this.$refs.de.msg)
      this.$refs.de.demoFn()
    }
  }
}
</script>

<style>

</style>